<template>
  <div>
    <ItemMusicTop v-if="state.show" :playlist="state.playlist" />
    <ItemMusicList
      v-if="state.show"
      :itemList="state.itemLists"
      :subscribedCount="state.playlist.subscribedCount"
    />
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";

import { getMusicItemList } from "@/api/request.js";
import { getItemList } from "@/api/request.js";

import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";

export default {
  name: "ItemMusic",
  setup() {
    const state = reactive({
      show: false,
      playlist: {}, //歌单详情
      itemLists: [], //歌单歌曲
    });
    onMounted(async () => {
      let id = useRoute().query.id;

      let res = await getMusicItemList(id);
      state.playlist = res.data.playlist;

      let result = await getItemList({ id, limit: 15, offset: 0 });
      console.log(result);
      state.itemLists = result.data.songs;

      state.show = true;
      sessionStorage.setItem("itemDetail", JSON.stringify(state));
    });
    return { state };
  },
  components: {
    ItemMusicTop,
    ItemMusicList,
  },
};
</script>

<style>
</style>